<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Vue完成简易购物车案例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        th {
            font-weight: bold;
            text-align: center;
            background-color: #cc9;
            height: 40;
        }

        td {
            height: 40;
        }

        tr {
            height: 80px;
        }

        #container {
            /* background-color: red; */
        }

        #d2 {
            /* background-color: green; */
            width: 70%;
            text-align: left;
            font-size: x-large;
            font-weight: 800;
        }
    </style>

</head>

<body>
    <br>
    <div id="container" align="center">
        <table border="1px" width="70%" cellspacing="0">
            <tr>
                <th>序号</th>
                <th>书籍</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item , index) in items" align="center">
                <td>{{index + 1}}</td>
                <td>{{item.book}}</td>
                <td>{{item.date}}</td>
                <td>￥{{item.price.toFixed(2)}}</td>
                <td width="15%">
                    <input :disabled="item.count === 1" type="button" value="-" @click="subtractItem(index)">
                    <span>{{item.count}}</span>
                    <input type="button" value="+" @click="addItem(index)">
                </td>
                <td>
                    <input type="button" value="移除" @click.prevent="deleteItem(index)">
                </td>
            </tr>
        </table>
        <br>
        <!-- div id="d2">总价格：￥{{totalPrice}}</div> -->
        <!-- 整数，把 Number 四舍五入为指定小数位数的数字 -->
        <div id="d2">总价格：￥{{getTotalPrice().toFixed(2)}}</div>  
    </div>
</body>

<script>
    var app = new Vue({
        el: "#container",
        data: {
            // totalPrice: 0,
            items: [{
                book: "《java编程思想》", date: "2020-9", price: 98, count: 1
            }, {
                book: "《数据分析与数据原理》", date: "2019-2", price: 39, count: 1
            }, {
                book: "Hadoop权威指南", date: "2019-10", price: 59, count: 1
            }, {
                book: "代码大全", date: "2018-8", price: 128, count: 1
            }],
        },
        methods: {
            deleteItem: function (index) {
                if (confirm("您是否确认删除?")) {
                    this.items.splice(index, 1);
                }
            },
            subtractItem: function (index) {
                // if (this.items[index].count < 2)
                //     return;
                this.items[index].count -= 1;
            },
            addItem: function (index) {
                // console.log("addItem index = " + index);
                this.items[index].count += 1;
            },
            getTotalPrice: function () {
                var total = 0;
                // var _this = this;
                var items = this.items;

                for (var i = 0; i < items.length; i++) {
                    total += items[i].price * items[i].count;
                }
                console.log("触发总价计算" + total);
                // _this.totalPrice = total;
                return total;
            },

        },
        // created: function () {
        //     var total = 0;
        //     var _this = this;
        //     var items = this.items;

        //     for (var i = 0; i < items.length; i++) {
        //         total += items[i].price * items[i].count;
        //     }
        //     console.log("触发created中的总价计算" + total);
        //     _this.totalPrice = total;
        // },
        // beforeUpdate:function()  {
        //     var total = 0;
        //     var _this = this;
        //     var items = this.items;

        //     for (var i=0;i<items.length;i++) {
        //         total += items[i].price * items[i].count;
        //     }
        //     console.log("触发beforeUpdate中的总价计算"+total);
        //     _this.totalPrice = total;
        // },
    });

</script>

</html>